<template>
  <div class="app-container flex column">
    <top-title :content="content" :updateTime="false" style="padding-left: 0"></top-title>
    <div class="bottom f1 flex">
      <div class="left left-card flex column">
        <div class="top-card flex column bg-c p-16 mb-16">
          <div class="common-title">
            <span class="icon"></span>
            <span>房屋详情</span>
          </div>
          <div class="inside-pic">
            <img
              v-if="house_data.rentalHouseImage"
              id="rentalHouseImage"
              :data-original="imgPrefix + house_data.rentalHouseImage"
              :src="imgPrefix + house_data.rentalHouseImage"
              class="cursor"
              @click="werImg('rentalHouseImage')"
            />
            <img v-else src="@/assets/imgs/house_empty.png" />
            <!-- <span class="img-count flex"
              ><img src="@/assets/imgs/companyDetail/img_count.png" alt="" /> {{ 1 }}张图片</span
            >
            <ul id="insideLookPhoto" style="display: none">
              <li v-for="(item, index) in insideLookPhoto" :key="index">
                <img :src="imgPrefix + item.path" :data-original="imgPrefix + item.path" />
              </li>
            </ul> -->
          </div>

          <div class="form-item-wrap f1 flex column justify-around" style="position: relative">
            <div v-if="$route.query.type == 1" class="form-item">
              <div class="label">所属小区:</div>
              <div class="value">
                <a-tooltip placement="top">
                  <template slot="title">
                    {{ house_data.neighbourhoodName }}
                  </template>
                  {{ house_data.neighbourhoodName }}
                </a-tooltip>
              </div>
            </div>
            <div v-if="$route.query.type == 1" class="form-item">
              <div class="label">房屋位置:</div>
              <div class="value">{{ house_data.houseAddr }}</div>
            </div>
            <div v-if="$route.query.type == 2" class="form-item">
              <div class="label">房屋编号:</div>
              <div class="value">{{ house_data.houseAddr }}</div>
            </div>
            <div v-if="house_data.houseLat && house_data.houseLng" class="form-item flex">
              <div class="label">地图位置:</div>
              <div class="value" style="max-width: 2.4rem">
                <a-tooltip placement="top">
                  <template slot="title">
                    {{ house_data.mapAddr }}
                  </template>
                  {{ house_data.mapAddr }}
                </a-tooltip>
              </div>
              <div class="f1 click-map" @click="open_in_map(house_data)">查看地图</div>
            </div>
            <div class="form-item">
              <div class="label">房屋性质:</div>
              <div class="value">{{ house_data.rentalHouseNature == 1 ? '私有' : '公有' }}</div>
            </div>
            <div class="form-item">
              <div class="label">房屋面积:</div>
              <div class="value">{{ house_data.houseArea }} ㎡</div>
            </div>
            <div class="form-item">
              <div class="label">房屋结构:</div>
              <div class="value">{{ getDictType(house_structure_type, house_data.rentalHouseStructure) }}</div>
            </div>
            <img
              v-if="$route.query.showStopImg"
              src="@/assets/imgs/community/stop.png"
              style="position: absolute; bottom: 10%; right: 0; width: 1.08rem; z-index: 1"
            />
          </div>
        </div>

        <div class="bot-card f1 bg-c p-16 flex column">
          <div class="common-title">
            <span class="icon"></span>
            <span>房主详情</span>
          </div>
          <div class="form-item-wrap f1 flex column justify-around">
            <div class="form-item">
              <div class="label label-w">房主姓名:</div>
              <div class="value">{{ house_data.houseOwnerName || '--' }}</div>
            </div>
            <div class="form-item">
              <div class="label label-w">联系电话:</div>
              <div class="value">{{ house_data.houseOwnerMobile || '--' }}</div>
            </div>
            <div class="form-item">
              <div class="label label-w">身份证号:</div>
              <div class="value">{{ house_data.houseOwnerIdCard || '--' }}</div>
            </div>
            <div class="form-item">
              <div class="label label-w">户籍地址:</div>
              <div class="value">
                <a-tooltip placement="top">
                  <template slot="title">
                    {{ house_data.houseOwnerDetail || '--' }}
                  </template>
                  {{ house_data.houseOwnerDetail || '--' }}
                </a-tooltip>
              </div>
            </div>
            <div class="form-item">
              <div class="label label-w">身份证照片:</div>
              <div v-if="house_data.houseIdCardImage" class="click-map" @click="werImg('houseOwnerImage')">
                <img
                  id="houseOwnerImage"
                  :data-original="imgPrefix + house_data.houseIdCardImage"
                  :src="imgPrefix + house_data.houseIdCardImage"
                  style="display: none"
                />
                查看
              </div>
              <div v-else class="value">--</div>
            </div>
          </div>
        </div>
      </div>

      <div
        v-if="$route.query.isShowRightCard == 'true'"
        class="right-card right f1 flex column ml-16"
        style="min-width: 0"
      >
        <div class="top-card flex column bg-c p-16 mb-16">
          <div class="common-title">
            <span class="icon"></span>
            <span>现居租客</span>
          </div>

          <div v-if="house_tenant_data.length > 0" class="mian-tenant-container">
            <div class="main-tenant-tabs-wrap">
              <span
                v-for="(item, index) in house_tenant_data"
                :key="index"
                :class="house_tenant_type == index ? 'main-tenant-active' : ''"
                class="main-tenant"
                @click="house_tenant_change(index)"
                >主租人{{ index + 1 }}:{{ item.rentalHouseTenantName }}</span
              >
            </div>

            <div class="main-tenant-info-wrap flex">
              <div class="main-tenant-img-wrap">
                <img :src="imgPrefix + house_tenant_info.image" class="main-tenant-img" />
                <div class="main-tenant-name text-overflow">
                  主租人{{ house_tenant_type + 1 }}:{{ house_tenant_info.rentalHouseTenantName }}
                </div>
              </div>

              <div class="main-tenant-info f1 flex">
                <div class="f1 main-tenant-info-col flex column justify-around">
                  <div class="form-item">
                    <div class="label">联系电话:</div>
                    <div class="value">{{ house_tenant_info.mobile }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">证件照片:</div>
                    <div class="click" @click="werImg('rentalHouseTenantImage')">
                      <img
                        id="rentalHouseTenantImage"
                        :data-original="imgPrefix + house_tenant_info.rentalHouseTenantImage"
                        :src="imgPrefix + house_tenant_info.rentalHouseTenantImage"
                        style="display: none"
                      />
                      查看
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="label">身份证号:</div>
                    <div class="value">{{ house_tenant_info.idCard }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">户籍地址:</div>
                    <div class="value">
                      {{ house_tenant_info.residenceDetail }}
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="label">工作单位:</div>
                    <div class="value">{{ house_tenant_info.workUnit }}</div>
                  </div>
                </div>
                <div class="f1 main-tenant-info-col flex column justify-around">
                  <div class="form-item">
                    <div class="label">租房时间:</div>
                    <div class="value">
                      {{ formatDate(rental_contract_info.beginTime) }} - {{ formatDate(rental_contract_info.endTime) }}
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="label flex justify-between"><span>租</span> <span>期:</span></div>
                    <div class="value">{{ rental_contract_info.leaseTerm }}月</div>
                  </div>
                  <div class="form-item">
                    <div class="label flex justify-between"><span>房</span> <span>租:</span></div>
                    <div class="value">{{ rental_contract_info.rentalRent }}/月</div>
                  </div>
                  <div class="form-item">
                    <div class="label">租房用途:</div>
                    <div class="value">{{ getDictType(rental_use, rental_contract_info.rentalUse) }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">租房合同:</div>
                    <div class="click" @click="jump_contract_detail(rental_contract_info)">查看</div>
                  </div>
                </div>
                <div class="f1 main-tenant-info-col flex column justify-around"></div>
                <div class="f1 main-tenant-info-col flex column justify-around"></div>
              </div>
            </div>

            <div class="mian-tenant-family-members-wrap flex">
              <div v-for="(item, index) in house_tenant_cohabit" :key="index" class="mian-tenant-family-member flex">
                <div class="family-member-img-wrap flex column align-center justify-around">
                  <img :src="imgPrefix + item.image" class="family-member-img" />
                  <div class="member-relationship">{{ getDictType(tenant_relationship, item.relationship) }}</div>
                  <div class="member-name">{{ item.rentalHouseTenantName }}</div>
                </div>
                <div class="family-member-info-wrap f1 flex column justify-around">
                  <div class="form-item">
                    <div class="label">联系电话:</div>
                    <div class="value">{{ item.mobile }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">证件照片:</div>
                    <div class="click" @click="werImg('rentalHouseTenantImage2')">
                      <img
                        id="rentalHouseTenantImage2"
                        :data-original="imgPrefix + item.rentalHouseTenantImage"
                        :src="imgPrefix + item.rentalHouseTenantImage"
                        style="display: none"
                      />查看
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="label">身份证号:</div>
                    <div class="value">{{ item.idCard }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">户籍地址:</div>
                    <div class="value">
                      <a-tooltip placement="top">
                        <template slot="title">
                          {{ item.residenceDetail }}
                        </template>
                        {{ item.residenceDetail }}
                      </a-tooltip>
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="label">工作单位:</div>
                    <div class="value">
                      <a-tooltip placement="top">
                        <template slot="title">
                          {{ item.workUnit }}
                        </template>
                        {{ item.workUnit }}
                      </a-tooltip>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div v-else class="mian-tenant-container flex column align-center justify-center">
            <img alt="" src="@/assets/imgs/community/nodata.png" />
            <span style="font-weight: 500; color: #abd5ff; margin-top: 14px">暂无租客</span>
          </div>
        </div>

        <div class="bottom-card f1 p-16 bg-c flex column">
          <div class="common-title">
            <span class="icon"></span>
            <span>历史租客</span>
          </div>
          <div class="pastTenants-wrap f1 flex align-center">
            <div v-for="(item, index) in house_history_tenant_list" :key="index" class="pastTenants-item flex">
              <div class="family-member-img-wrap flex column align-center justify-around">
                <img :src="imgPrefix + item.image" class="family-member-img" />
                <div class="member-name">主租人</div>
              </div>
              <div class="family-member-info-wrap f1 flex column justify-around">
                <div class="form-item">
                  <div class="label">租客姓名:</div>
                  <div class="value">{{ item.rentalHouseTenantName }}</div>
                </div>
                <div class="form-item">
                  <div class="label">联系电话:</div>
                  <div class="value">{{ item.mobile }}</div>
                </div>
                <div class="form-item">
                  <div class="label">租房时间:</div>
                  <div class="value">
                    {{ formatDate(item.beginTime) }}
                  </div>
                </div>
                <div class="form-item">
                  <div class="label">退租时间:</div>
                  <div class="value">{{ formatDate(item.endTime) }}</div>
                </div>
                <div class="form-item flex">
                  <div class="label">同住人数:</div>
                  <div class="value" style="max-width: 200px">{{ item.cohabitCount }}人</div>
                  <div class="f1 click-map" style="color: #47e829" @click="show_dialog(item)">查看详情 ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-else class="right-card right f1 flex column ml-16" style="min-width: 0">
        <div class="bottom-card f1 p-16 bg-c flex column">
          <div class="common-title">
            <span class="icon"></span>
            <span>历史租客</span>
          </div>

          <div v-if="house_history_tenant_list.length > 0" style="overflow: scroll; min-height: 0; height: 7.2rem">
            <a-row style="margin-top: 16px">
              <a-col
                v-for="(item, index) in house_history_tenant_list"
                :key="index"
                :span="8"
                class="flex pastTenants-item row-pastTenants-item"
              >
                <div class="family-member-img-wrap flex column align-center justify-around">
                  <img :src="imgPrefix + item.image" class="family-member-img" />
                  <div class="member-name">主租人</div>
                </div>
                <div class="family-member-info-wrap f1 flex column justify-around">
                  <div class="form-item">
                    <div class="label">租客姓名:</div>
                    <div class="value">{{ item.rentalHouseTenantName }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">联系电话:</div>
                    <div class="value">{{ item.mobile }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">租房时间:</div>
                    <div class="value">
                      {{ formatDate(item.beginTime) }}
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="label">退租时间:</div>
                    <div class="value">{{ formatDate(item.endTime) }}</div>
                  </div>
                  <div class="form-item flex">
                    <div class="label">同住人数:</div>
                    <div class="value" style="max-width: 200px">{{ item.cohabitCount }}人</div>
                    <div class="f1 click-map" style="color: #47e829" @click="show_dialog(item)">查看详情 ></div>
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>

          <div v-else class="mian-tenant-container flex column align-center justify-center">
            <img alt="" src="@/assets/imgs/community/nodata.png" />
            <span style="font-weight: 500; color: #abd5ff; margin-top: 14px">暂无租客</span>
          </div>
        </div>
      </div>
    </div>

    <detail-dialog ref="detailDialog"></detail-dialog>
    <cus-map ref="cusMap"></cus-map>
  </div>
</template>

<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import { comMethods } from '@/mixins/comMethods'
import { getAction } from '@/api/manage'
import topTitle from '@/components/topTitle'
import detailDialog from './detailDialog'
import cusMap from '../modules/map'
import { ajaxGetDictItems } from '@/api/api'
export default {
  components: { topTitle, detailDialog, cusMap },
  mixins: [comMethods],
  data() {
    return {
      content: [],
      house_data: {}, // 房屋详情
      house_tenant_data: [], // 主租人list
      house_tenant_info: {}, // 主租人信息，在切换时从list中取
      house_tenant_type: '0',
      house_tenant_cohabit: [], // 同住人list
      house_history_tenant_list: [], // 历史主租人list
      rental_contract_info: {}, // 合同详情

      rental_use: [], // 租房用途
      house_structure_type: [], // 房屋结构
      tenant_relationship: [], // 与主租人关系
    }
  },
  mounted() {
    if (this.$route.query.type == '1') {
      this.content = [['小区出租屋'], ['房屋详情']]
      this.get_community_detail_data()
    } else {
      this.get_self_house_detail_data()
      this.content = [['自建房出租屋'], ['房屋详情']]
    }
    this.get_house_tenant_data() // 根据房屋类型与房屋编号获取主租人信息
    this.get_house_history_tenant_list() // 获取历史主租人

    this.get_dict()
  },
  methods: {
    /**
     * * @description 获取小区房屋详情
     * @param {number} id - 房屋编号
     * @param 如果是自建房 接口换为 /rental/self_house/detail
     */
    async get_community_detail_data() {
      let { result } = await getAction('/rental/house/detail', { id: this.$route.query.id })
      this.house_data = result
    },

    async get_self_house_detail_data() {
      let { result } = await getAction('/rental/self_house/detail', { id: this.$route.query.id })
      this.house_data = result
    },

    /**
     * * @description 根据房屋类型与房屋编号获取主租人信息
     * @param {number} rentalHouseId - 房屋编号
     * @param {number} type - 房屋类型 (1: 小区房, 2: 自建房)
     * * @description - 用于右上切换tabs
     */
    async get_house_tenant_data() {
      let {
        result: { records },
      } = await getAction('/rental/house_tenant/page', {
        rentalHouseId: this.$route.query.id,
        type: this.$route.query.type,
        pageSize: 99999,
      })
      this.house_tenant_data = records
      if (this.$route.query.mainId) {
        let a = records.findIndex((item) => {
          return item.id == this.$route.query.mainId
        })
        this.house_tenant_change(a)
        return
      }
      this.house_tenant_change(0)
    },

    /**
     * * @description 获取主租人详情。
     * @param {number} type - 点击tabs时的index，用于从数组取值
     * @returns {Object} 从 house_tenant_data 取的index对应的obj
     * * @description - 切换时获取列表数据 同时查询合同详情
     */
    house_tenant_change(type) {
      this.house_tenant_type = type
      this.house_tenant_info = this.house_tenant_data[type]
      try {
        this.get_house_tenant_detail(this.house_tenant_info.id)
        this.get_house_tenant_cohabit_list(this.house_tenant_info.id)
      } catch (error) {
        console.error('An error occurred:未查询到现居租客', error.message)
      }
    },

    /**
     * * @description 获取合同详情
     * @param {string} id 小区房屋编号
     */

    async get_house_tenant_detail(id) {
      let {
        result: { rentalContractInfo },
      } = await getAction('/rental/house_tenant/detail', { id })
      this.rental_contract_info = rentalContractInfo
    },

    /**
     * * @description 获取同住人员列表。
     * @param {int} houseTenantId - 点击tabs时的获取info的id
     * @returns {Object} 查到的list
     */
    async get_house_tenant_cohabit_list(houseTenantId) {
      let {
        result: { records },
      } = await getAction('/rental/house_tenant_cohabit/page', { houseTenantId, pageSize: 99999 })
      this.house_tenant_cohabit = records
    },

    /**
     * * @description 获取历史主租人。
     * @param {int} rentalHouseId - 传入的id
     * @param {int} type - 房屋类型 1.小区房 2.自建房
     */
    async get_house_history_tenant_list() {
      let {
        result: { records },
      } = await getAction('/rental/house_history_tenant/page', {
        rentalHouseId: this.$route.query.id,
        type: this.$route.query.type,
        pageSize: 99999,
      })
      this.house_history_tenant_list = records
    },

    /**
     * * @description 格式化日期时间字符串，只保留日期部分。
     * @param {string} dateTimeString - 日期时间字符串
     * @returns {string} 格式化后的日期字符串
     */
    formatDate(dateTimeString) {
      if (!dateTimeString) {
        return ''
      }
      const datePart = dateTimeString.split(' ')[0]
      return datePart
    },

    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: false,
        button: false,
        navbar: false,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },

    async get_dict() {
      let { result: rental_use } = await ajaxGetDictItems({ code: 'rental_use' })
      this.rental_use = rental_use

      let { result: house_structure_type } = await ajaxGetDictItems({ code: 'house_structure_type' })
      this.house_structure_type = house_structure_type

      let { result: tenant_relationship } = await ajaxGetDictItems({ code: 'tenant_relationship' })
      this.tenant_relationship = tenant_relationship
    },

    getDictType(list, type) {
      let res = list.find((item) => item.value == type)
      if (res && res.title) {
        return res.title
      } else {
        return '暂无'
      }
    },

    open_in_map(record) {
      this.$refs.cusMap.show(record)
    },

    show_dialog(item) {
      let params = {
        ...item,
        title: '历史租客详情页',
      }
      this.$refs.detailDialog.show(params)
    },

    jump_contract_detail(rental_contract_info) {
      this.$router.push({ path: '/rental/modules/contractDetail', query: rental_contract_info })
    },
  },
}
</script>

<style lang="less" scoped>
.p-16 {
  padding: 0 0.16rem;
}

.ml-16 {
  margin-left: 16px;
}

.mb-16 {
  margin-bottom: 10px;
}

.bg-c {
  background: var(--theme-container-bg);
}
.app-container {
  padding: 0 0.16rem;
  padding-bottom: 0.1rem;
  background: var(--theme-content-bg);

  .common-title {
    .icon {
      width: 6px;
      height: 6px;
      background: #aed6ff;
      display: inline-block;
      margin-right: 4px;
      border-radius: 50%;
    }
    padding: 0.16rem 0 0.13rem 0.1rem;
    font-size: 0.14rem;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #aed6ff;
    border-bottom: 1px dashed var(--theme-input-border);
  }

  .form-item {
    font-size: 0.14rem;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    display: flex;

    .label {
      width: 0.6rem;
      min-width: 0.6rem;
      font-weight: 500;
      color: #317bc8;
      text-align: right;
      margin-right: 5px;
    }

    .label-w {
      width: 0.8rem;
      min-width: 0.8rem;
    }

    .value {
      color: var(--theme-modal-label-value-color);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .click {
      color: #47e829;
      cursor: pointer;
    }
    .click-map {
      cursor: pointer;
      text-align: right;
      font-weight: 500;
      color: #1388ff;
    }
  }

  .top-card {
    height: 5.44rem;
  }

  .left {
    width: 4rem;
  }

  .inside-pic {
    position: relative;
    margin: 0.16rem 0;
    img {
      width: 100%;
      height: 2.32rem;
      border-radius: 8px;
      object-fit: cover;
    }
    .img-count {
      position: absolute;
      right: 10px;
      bottom: 10px;
      font-size: 14px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #b5daff;
      align-items: center;

      img {
        width: 0.16rem;
        height: 0.14rem;
        border-radius: 0;
        margin-right: 0.05rem;
      }
    }
  }

  .mian-tenant-container {
    padding: 0.12rem 0;

    .main-tenant-tabs-wrap {
      .main-tenant {
        display: inline-block;
        font-size: 0.16rem;
        font-weight: bold;
        background: var(--theme-container-bg);
        padding: 0.09rem 0.2rem;
        cursor: pointer;
        color: #509eee;
        border-right: 1px solid var(--theme-input-border);
      }
      .main-tenant-active {
        color: #0b3763;
        background: #2488f5;
      }
    }

    .main-tenant-info-wrap {
      margin: 0.25rem 0;
      .main-tenant-img-wrap {
        width: 1.35rem;
      }
      .main-tenant-img {
        width: 1.35rem;
        height: 1.5rem;
        border-radius: 8px;
      }

      .main-tenant-name {
        font-size: 0.14rem;
        font-weight: 500;
        color: #3a8ddf;
        background: #074685;
        border-radius: 15px;
        max-height: 0.35rem;
        border: 1px solid #0c5094;
        padding: 0.05rem 0.15rem;
        margin-top: 0.1rem;
      }

      .main-tenant-info {
        margin-left: 16px;

        .main-tenant-info-col {
          min-width: 0;
        }
      }
    }

    .mian-tenant-family-members-wrap {
      // overflow: hidden;
      overflow-x: scroll;
      .mian-tenant-family-member {
        width: 4.7rem;
        height: 1.77rem;
        margin-right: 10px;
        background: #0c3c6b;
        padding: 0 0.16rem;
      }

      .family-member-img-wrap {
        position: relative;
        margin: 0 0.3rem 0 0.1rem;

        .family-member-img {
          width: 1.12rem;
          height: 1.12rem;
          border-radius: 50%;
        }

        .member-relationship {
          position: absolute;
          top: 60%;
          left: 50%;
          transform: translateX(-50%);
          background: #1a6fc4;
          width: 0.6rem;
          border-radius: 0.22rem;
          font-size: 0.14rem;
          font-weight: 500;
          color: #a1cfff;
          padding: 0 0.16rem;
        }

        .member-name {
          font-size: 14px;
          font-weight: 500;
          color: var(--theme-modal-label-value-color);
        }
      }

      .family-member-info-wrap {
        min-width: 0;
      }
    }
  }

  .pastTenants-wrap {
    // overflow: hidden;
    overflow-x: scroll;

    &::-webkit-scrollbar-thumb {
      background-color: #1388ff; /* 修改为你想要的颜色 */
    }
  }
  .pastTenants-item {
    width: 4.7rem;
    height: 1.77rem;
    margin-right: 10px;
    background: #0c3c6b;
    padding: 0 0.16rem;
  }

  .row-pastTenants-item {
    width: 4.6rem;
    margin-bottom: 10px;
  }

  .family-member-img-wrap {
    margin: 0 0.3rem 0 0.1rem;

    .family-member-img {
      width: 1.12rem;
      height: 1.12rem;
      border-radius: 50%;
    }

    .member-name {
      font-size: 14px;
      font-weight: 500;
      color: var(--theme-modal-label-value-color);
      background: #074685;
      border-radius: 0.15rem;
      padding: 0.05rem 0.19rem;
    }
  }

  .family-member-info-wrap {
    min-width: 0;
  }
}
</style>
